<template>
  <div class="page">
    <div class="J-record-show">
      <div class="weui-flex pl">
        <div class="weui-flex__item line-bottom">
          <div class="record_a weui-cell_access">
            <div class="record_">
              <span class="fl font-16">{{getRefuelingshow.gsName}}</span>
            </div>
            <div class="record_">
              <span class="fl font-12 color-2">订单号：{{getRefuelingshow.orderNo}}</span>
              <span class="fr font-12 color-2">{{getRefuelingshow.orderCreateTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-flex pl">
        <div class="weui-flex__item line-bottom">
            <div class="record_">
              <span class="fl">{{gsNo}}</span>
              <span class="fr">{{getRefuelingshow.gasAmount}}升</span>
            </div>
        </div>
      </div>
      <div class="weui-flex pl">
        <div class="weui-flex__item line-bottom">
          <div class="record_">
            <span class="fl">油品金额</span>
            <span class="fr">{{getRefuelingshow.salePrice}}元</span>
          </div>
        </div>
      </div>
      <div class="weui-flex pl">
        <div class="weui-flex__item line-bottom">
          <div class="record_">
            <span class="fl">非油品金额</span>
            <span class="fr">{{getRefuelingshow.noGasItemPrice}}元</span>
          </div>
        </div>
      </div>
      <div class="weui-flex pl">
        <div class="weui-flex__item line-bottom">
          <div class="record_">
            <span class="fl">实付金额</span>
            <span class="fr">{{getRefuelingshow.payPrice}}元</span>
          </div>
        </div>
      </div>
      <div class="weui-flex pl">
        <div class="weui-flex__item line-bottom">
          <div class="record_">
            <span class="fl">优惠金额</span>
            <span class="fr"><em class="color-3">{{(getRefuelingshow.gsPrice - getRefuelingshow.payPrice) | toFixed}}</em>元</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  const util = require('~src/lib/util')
  export default {
    name: 'record-show',
    data () {
      return {
      }
    },
    computed: {
      ...mapGetters({
        getRefuelingshow: 'getRefuelingshow'
      }),
      gsNo () {
        var gsno = ''
        if (this.getRefuelingshow.gasNo == '0') {
          gsno = '92#(93#)'
        } else if(this.getRefuelingshow.gasNo == '1') {
          gsno = '95#(97#)'
        } else if(this.getRefuelingshow.gasNo == '2') {
          gsno = '98#'
        } else if(this.getRefuelingshow.gasNo == '3') {
          gsno = '0#'
        }
        return gsno
      }
    },
    mounted () {
      var _this = this
      if (util.isEmptyObject(_this.getRefuelingshow)) {
        _this.$store.dispatch('getRefuelingshow', _this.$route.query.id)
      } else {
        _this.$store.commit('updataRefuelingshow', _this.$route.query.id)
      }
    }
  }
</script>
<style lang="scss">
  .J-record-show{
    background-color:#fff;
    .weui-flex{
      padding:10px;
    }
    .record_a{
      color:#333;
    }
    .record_{
      overflow: hidden;
      font-size: 14px;
      em {
        font-style: normal;
        margin-right: 5px;
      }
    }
  }
</style>
